{% extends "layouts/module-layout.html" %}
{% block javascript %}
<script type="text/javascript" src="/static/js/funciones.js"></script>
<script type="text/javascript">
	$(function() {
		var tareas = $("#tareas").dataTable();
		var dates = $("#from, #to")
				.datepicker(
						{
							defaultDate : "+1w",
							changeMonth : true,
							numberOfMonths : 1,
							onSelect : function(selectedDate) {
								var option = this.id == "from" ? "minDate"
										: "maxDate", instance = $(this).data(
										"datepicker"), date = $.datepicker
										.parseDate(
												instance.settings.dateFormat
														|| $.datepicker._defaults.dateFormat,
												selectedDate, instance.settings);
								dates.not(this).datepicker("option", option,
										date);
								var from = $("#from").val();
								var to = $("#to").val();
								if (from != "" && to != "") {
									tareas.fnClearTable();
									$
											.post(
													"{{ config.urlRoot }}tareas/",
													{
														'from' : from,
														'to' : to
													},
													function(data) {
														if (data != null) {
															$
																	.each(
																			data.tareas,
																			function(
																					key,
																					val) {
																				tareas
																						.fnAddData([ val.codigo ]);
																			});
														}
													}, "json").error(function(){
										                $( "#mssger" ).html("Not data found");
										                $( "#mssger" ).dialog( "open" );
										            });
								}
							}
						});
	});
</script>
{% endblock %}
{% block css %}
<link type="text/css" rel="stylesheet" href="/static/css/main.css"></link>
{% endblock %}
{% block title %}{{ titulo }}{% endblock %}
{% block content %}
    <div>
		<table>
			<tr>
				<td><label for="from">Desde:</label><input type="text" id="from"
					name="from" /></td>
				<td><label for="to">Hasta:</label><input type="text" id="to"
					name="to" /></td>
			</tr>
		</table>
		<table style="width: 100%">
			<tr>
				<td><table id="tareas">
						<caption>Tareas</caption>
						<thead>
							<tr>
								<th>C&oacute;digo</th>
							</tr>
						</thead>
					</table></td>
			</tr>
		</table>
	</div>
{% endblock %}